<template>
  <div class="home">
    <TitleView :title="title">
    </TitleView>
    <div class="home_con" @click="addBtn">
      + 新增发票抬头
    </div>
    <ul>
      <li v-for="item in list" :key="item.id" @click="setMyList(item)">
        <div class="left">
          <p>{{ item.name }}</p>
          <p><span>{{ item.unit == 0 ? '企业' : item.unit == 1 ? '非企业性单位' : '个人' }}</span><span>{{ item.defaults == 0 ?
            '专用发票' : '默认' }}</span>
          </p>
        </div>
        <div class="right"><button @click.stop="delMyList(item.id)">删除</button></div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import TitleView from "@/components/TitleView.vue";
import { onMounted, reactive, ref } from "vue"
import { getList,del_list } from '../apis/index';
import router from '../router/index';
let title = ref('发票抬头')
let list = ref()
// 选择添加或编辑
let paste = ref(0)
onMounted(async () => {
 await getMy_list()

})
let getMy_list=async()=>{
  await getList().then((res: any) => {
    console.log(res.data);
    list.value = res.data
  })
}
let addBtn = () => {
  paste.value = 0
  router.push({ path: '/add', query: { paste: paste.value }})
}
let setMyList=(val:any)=>{
  let add=JSON.stringify(val)
  // console.log(add);
  paste.value=1
  router.push({path:'/add',query:{add,paste: paste.value}})
}
// 删除
let delMyList = async(id:number) => {
    await del_list(id)
    await getMy_list()
}

</script>

<style lang="scss" >
.home {
  width: 100%;
  height: 100%;

  .home_con {
    width: 95%;
    height: 50px;
    border-radius: 5px;
    background-color: #fff;
    margin: 10px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: aqua;
  }

  ul {
    width: 95%;
    margin: 10px auto;

    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background-color: #fff;
      height: 80px;
      margin-bottom: 10px;
      border-radius: 5px;

      .left {
        margin-left: 30px;

        p {
          span {
            border: 1px solid #ccc;
            display: inline;
            font-size: 12px;
            padding: 2px 5px;
            border-radius: 5px;
            margin-right: 10px;
          }
        }
      }

      .right {
        margin-right: 30px;
      }
    }
  }
}
</style>